<script setup>
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import {showSuccessToast} from "vant";
import {addVideoLikeApi, deleteVideoLikeApi, getVideoLikeStatusApi} from "@/api/video";
import {getUserLoginStatus} from "@/utils/userIsLogin";

const props = defineProps({
  videoItem: {
    type: Object,
    required: true,
  },
  videoFocus: {
    type: Boolean,
    required: false,
  }
})
// video的Dom元素
const videoRef = ref(null)
// video实例对象
let videoPlayer = ref(null)
// 初始化videojs
const initVideo = async () => {
  await isLikeVideo()
  const options = {
    language: 'zh-CN', // 设置语言
    controls: false, // 是否显示控制条
    preload: 'meta', // 预加载
    autoplay: false, // 是否自动播放
    fluid: false, // 自适应宽高
    src: props.videoItem.videoUrl, // 要嵌入的视频源的源 URL
    loop: true, // 是否循环播放
    poster: false, // 视频封面
    userActions: {
      click: true
    }
  };
  if (videoRef.value) {
    // 创建 video 实例
    videoPlayer.value = videojs(videoRef.value, options, () => {
      videoLoadEmits('onVideoLoaded')
    })
    // 初始化播放按钮
    videoPlayer.value.on('play', () => {
      isShowPlayIcon.value = false
    })
    // 初始化暂停按钮
    videoPlayer.value.on('pause', () => {
      isShowPlayIcon.value = true
    })
    // 加载错误
    videoPlayer.value.on('error', (e) => {
      console.log('video error' + e)
      showSuccessToast('视频错误11');
    })
  } else {
    console.log('videoRef.value is null')
  }
}
//定义emits
const videoLoadEmits = defineEmits(['onVideoLoaded'])
// 挂载时初始化video
onMounted(() => {
  initVideo()
})
// 销毁时销毁video
onBeforeUnmount(() => {
  if (videoPlayer.value) {
    videoPlayer.value.dispose()
  }
})
// 是否显示播放按钮
const isShowPlayIcon = ref(true)
// 播放
const onPlay = () => {
  try {
    if (!videoPlayer.value) {
      // showSuccessToast('视频错误222');
      console.log('视频还未加载成功--->>>>videoPlayer.value is null')
      return;
    }
    videoPlayer.value.paused() && videoPlayer.value.play()
  } catch (e) {
    console.log(e)
  }
}
// 暂停
const onPause = () => {
  try {
    if (!videoPlayer.value) {
      return;
    }
    !videoPlayer.value.paused() && videoPlayer.value.pause()
  } catch (e) {
    console.log(e)
  }
}
defineExpose({
  onPlay,
  onPause,
});
// 监听videoFocus变化,是否播放
watch(() => props.videoFocus, (newVal) => {
  newVal ? onPlay() : onPause()
}, {immediate: true})
// 点击切换播放状态
const onPlayOrPause = () => {
  try {
    if (!videoPlayer.value) {
      showSuccessToast('视频错误444');
      return;
    }
    videoPlayer.value.paused() ? videoPlayer.value.play() : videoPlayer.value.pause()
  } catch (e) {
    console.log(e)
  }
}
// 喜欢按钮
const isActive = ref(false)
// 查看用户是否喜欢
const isLikeVideo = async () => {
  const isLogin = getUserLoginStatus()
  if (!isLogin) return
  try {
    const id = props.videoItem.id
    const res = await getVideoLikeStatusApi(id)
    if (res.msg !== '请求成功') {
      showSuccessToast(res.msg)
      return
    }
    const result = res.data
    isActive.value = result
  } catch (e) {
    console.log(e)
  }
}
// 点击喜欢按钮
const iLikeThisVideo = async () => {
  const isLogin = getUserLoginStatus()
  if (!isLogin) {
    showSuccessToast('请先登录')
    return
  }
  try {
    if (!videoPlayer.value) {
      showSuccessToast('不存在该视频');
      return;
    }
    if (isActive.value) {
      await deleteVideoLikeApi(props.videoItem.id)
      // eslint-disable-next-line vue/no-mutating-props
      props.videoItem.likeCount--
    } else {
      await addVideoLikeApi(props.videoItem.id)
      // eslint-disable-next-line vue/no-mutating-props
      props.videoItem.likeCount++
    }
    await isLikeVideo()
  } catch (e) {
    console.log(e)
  }
}
</script>
<template>
  <div class="video-item-box">
    <video id="my-player" ref="videoRef" class="video-js video-full"
           webkit-playsinline="true" playsinline="true" :poster="videoItem.imageUrl">
      <source :src="videoItem.videoUrl" type="video/mp4"/>
    </video>
    <div class="play-icon" v-if="isShowPlayIcon" @click.stop="onPlay">
      <van-icon :size="52" name="play-circle"/>
      <span>点击播放</span>
    </div>
    <div class="play-view" @click="onPlayOrPause" v-if="videoFocus">
      <!--喜欢按钮-->
      <div class="right-love" @click.stop="iLikeThisVideo">
        <van-icon :size="44" :color="isActive?'red':'#fff'" name="like"/>
        <span :style="{color:isActive?'red':'#fff'}">{{ videoItem.likeCount }}</span>
      </div>
      <!--视频描述地方-->
      <div class="videoDescription">
        <div class="videoDescription-title">{{ videoItem.title }}</div>
        <span class="videoDescription-content">{{ videoItem.description }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.video-item-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;

    span {
      margin-top: 10px;
      font-size: 14px;
    }
  }

  .play-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;

    .right-love {
      position: absolute;
      right: 10px;
      bottom: 200px;
      width: 100px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      span {
        font-size: 28px;
      }
    }

    .videoDescription {
      position: absolute;
      width: 100%;
      bottom: 100px;

      .videoDescription-title {
        width: 100%;
        font-size: 44px;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 28px;
      }

      .videoDescription-content {
        width: 100%;
        font-size: 24px;
        color: #fff;
        margin-left: 28px;
      }
    }
  }
}

.video-full {
  width: 100% !important;
  height: 100% !important;
}
</style>
